<template>
  <el-cascader 
    v-model="localFiled"
    :props="cascaderProps" 
    :expandTrigger="true"
    @change="fieldsChange"
    @getCheckedNodes="checkNodes"
    style="width: 400px"
  >
  </el-cascader>
</template>

<script>
import { getAreaList } from "@/api/fields";

let id = 0;

export default {
  name: "SelectFileds",
  props:{
    fieldValue:{
      type: String,
      default:''
    }
  },
  computed:{
    localFiled:{
      get(){
        if(!this.fieldValue){
          return []
        }
        let fildList = this.fieldValue.split(',')
        return fildList
      },
      /**
       * @params {String} v
       */
      set(v){
        let fieldsStr = v.join(',') 
        this.$emit('change',fieldsStr)
      }
    }
  },
  data() {
    return {
      cascaderProps: {
        lazy: true,
        async lazyLoad(node, resolve) {

          const id = node.value || undefined
          // const { level } = node;
          const res = await getAreaList({
            parentId: id,
          });
          const list = res.data;
          resolve(list);
        },
        value: "id",
        label: "name",
        checkStrictly: true,
      },
    };
  },
  methods: {
    async getFiledList(parentId = undefined) {
      let res = await getAreaList({ parentId });
      return res.data;
    },
    fieldsChange(v){

    },
    checkNodes(v){

    }
  },
};
</script>
<style>
</style>